<template>
  <div class="searchBody">
    <div class="searchBok">
      <div class="searchBoxOne" :class="{searchBoxOneActive:inputJD}">
        <div class="searchSvg">
          <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z" fill="currentColor"></path></svg>
        </div>
        <div class="inputBox">
          <input type="text" placeholder="搜索！(请不要输错字，会导致搜不到)" class="search fontHt" v-model="content" @focusin="inputJD = true" @focusout="inputJD = false">
          <svg class="clearSpan" @click="clear" :class="{show:content !== '' && content !== undefined  && content !== null}" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z" fill="#C9CCD0"></path></svg>
        </div>
        <button type="button" class="searchButton" @click="searchVideo"><span class="fontHt">搜索</span></button>
      </div>
    </div>
    <div class="sx">
      <div class="SXOne-t">
        <!--      <span class="fontHt">当前选择:</span>-->
        <div class="f-left">
          <button type="button" class="buttonBox" :class="{active:activeIndex4 === null}" @click="activeC4(null)">
            <span class="fontHt">综合结果</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex4 === 1 }" @click="activeC4(1)">
            <span class="fontHt">最近更新</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex4 === 2 }" @click="activeC4(2)">
            <span class="fontHt">最多收藏</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex4 === 3 }" @click="activeC4(3)">
            <span class="fontHt">最多追番</span>
          </button>
        </div>
        <div class="f-right">
          <button type="button" class="buttonBoxs" @click="sxIndex = !sxIndex">
            <span class="fontHt">更多筛选
            <svg xmlns="http://www.w3.org/2000/svg" :class="{rotateSvg:!sxIndex}" width="16" height="16" fill="currentColor" class="icon-more" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
            </svg>
            </span>
          </button>
        </div>
      </div>
      <div class="sx-more" :class="{sxActive:sxIndex}">
        <div class="SXOne">
          <!--      <span class="fontHt">视频状态:</span>-->
          <button type="button" class="buttonBox" :class="{active:activeIndex === null}" @click="activeC(null)">
            <span class="fontHt">完结状态</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex === 1 }" @click="activeC(1)">
            <span class="fontHt">已完结</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex === 2 }" @click="activeC(2)">
            <span class="fontHt">连载中</span>
          </button>
        </div>
        <div class="SXOne">
          <!--      <span class="fontHt">发布地区:</span>-->
          <button type="button" class="buttonBox" :class="{active:activeIndex2 === null}" @click="activeC2(null)">
            <span class="fontHt">全部地区</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex2 === 1 }" @click="activeC2(1,'中国')">
            <span class="fontHt">中国</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex2 === 2 }" @click="activeC2(2,'日本')">
            <span class="fontHt">日本</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex2 === 3 }" @click="activeC2(3,'欧美')">
            <span class="fontHt">欧美</span>
          </button>
          <button type="button" class="buttonBox" :class="{active:activeIndex2 === 4 }" @click="activeC2(4,'其他')">
            <span class="fontHt">其他</span>
          </button>
        </div>
        <div class="SXOne-x">
          <!--      <span class="fontHt">发布时间:</span>-->
          <button type="button" class="buttonBox" :class="{active:activeIndex3 === null}" @click="activeC3(null)">
            <span class="fontHt">全部时间</span>
          </button>
          <button type="button" class="buttonBox" v-for="(item , index) in list.years" :key="index" :class="{active:activeIndex3 === index+1 }" @click="activeC3(index+1,item.year)">
            <span class="fontHt">{{item.year}}</span>
          </button>
        </div>
        <div class="SXOne-x">
          <button type="button" class="buttonBox" :class="{active:activeIndex5 === null}" @click="activeC5(null)">
            <span class="fontHt">全部类型</span>
          </button>
          <button type="button" class="buttonBox" v-for="(item , index) in videoType" :key="item.id" :class="{active:activeIndex5 === index+1}" @click="activeC5(index+1)">
            <span class="fontHt">{{item.type}}</span>
          </button>
        </div>
      </div>
    </div>
      <div class="searchBack" v-for="(item , index) in list.items.list" :key="index">
        <div class="flex-left">
          <div class="tipType"><span class="fontHt">{{item.vTypeA}}</span></div>
          <img :src="item.vImgL" :alt="item.vImgL">
        </div>
        <div class="flex-right">
          <span class="fontHt videoName">{{item.vName}}</span>
          <span class="sm-span">更新时间： <span>{{item.vUpTime}}</span> · <span v-if="item.vIndex === 2">全<span>{{ item.vEpic }}</span>话</span>
        <span v-if="item.vIndex === 1">更新至<span>{{ item.vEpic }}</span>话</span></span>
          <span class="sm-span-x">参演阵容：<span>{{item.vPerson}}</span></span>
          <span class="sm-span">剧情简介：<span>{{item.vMsg}}</span></span>
          <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.id,index:1}}"><button class="goButton" type="button"><span class="fontHt">立即观看</span></button></router-link>
        </div>
      </div>
    <div class="pageBox" v-show="pageBoxIndex && list.items.navigateFirstPage !== 0">
      <div class="pageBoxOne">
        <button class="pageButton fontHt" type="button" @click="page(1)">&lt</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.navigateFirstPage)" :class="{active:list.items.pageNum === list.items.navigateFirstPage}"  v-show="list.items.isFirstPage">{{list.items.navigateFirstPage}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.pageNum-3)" :class="{active:list.items.pageNum === lestPage}" v-show="list.items.pageNum-3 >= list.items.navigateFirstPage">{{list.items.pageNum-3}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.pageNum-2)" :class="{active:list.items.pageNum === lestPage}" v-show="list.items.pageNum-2 >= list.items.navigateFirstPage">{{list.items.pageNum-2}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.pageNum-1)" :class="{active:list.items.pageNum === lestPage}" v-show="list.items.pageNum-1 >= list.items.navigateFirstPage">{{list.items.pageNum-1}}</button>
        <button class="pageButton fontHt" type="button" :class="{active:list.items.pageNum}" v-show="list.items.pageNum !== list.items.navigateFirstPage && list.items.pageNum !== list.items.navigateLastPage">{{list.items.pageNum}}</button>
        <button class="pageButton fontHt" type="button" :class="{none:list.items.navigateLastPage <= 3}">...</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.pageNum+1)" :class="{active:list.items.pageNum === lestPage}" v-show="list.items.pageNum <= list.items.navigateLastPage-1">{{list.items.pageNum+1}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.pageNum+2)" :class="{active:list.items.pageNum === lestPage}" v-show="list.items.pageNum <= list.items.navigateLastPage-2">{{list.items.pageNum+2}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.pageNum+3)" :class="{active:list.items.pageNum === lestPage}" v-show="list.items.pageNum <= list.items.navigateLastPage-3">{{list.items.pageNum+3}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.navigateLastPage)" :class="{active:list.items.pageNum === list.items.navigateLastPage}" v-show="list.items.isLastPage && list.items.pageNum !== 1">{{list.items.navigateLastPage}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.items.navigateLastPage)">></button>
      </div>
    </div>
<!--    <div class="divSS"></div>-->
    <div class="like" v-show="contentIndex">
      <div class="div-waike">
        <div class="up-list p-r">
          <template  v-for="(item, index) in list.itemAll.list" :key="item.id">
            <div class="up-list-def-w">
              <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.id,index:1}}">
              <div class="up-list-one p-r imgC" @mouseleave="yichu(index)" @mouseenter="yiru(index)">
                <img :src="item.vImgL" :alt="item.vImgL" :class="{goAction:newIndex === index}">
                <div class="epicNum">
                  <span v-if="item.vIndex === 1">更新至<span>{{item.vEpic}}</span>话</span>
                  <span v-if="item.vIndex === 2">全<span>{{item.vEpic}}</span>话</span>
                </div>
<!--                <div class="goBoxOne" :class="{show:newIndex === index}">-->
<!--                  <div class="go-box" >-->
<!--                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-91719014=""><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white" data-v-91719014=""></path></svg>-->
<!--                  </div>-->
<!--                </div>-->
                  <div class="background-cover"></div>
              </div>
              <div class="span-out-hid z-10">
                <span class="span-def">{{item.vName}}</span>
              </div>
              <div class="spanSm">
                <span >{{item.vTitleTip}}</span>
              </div>
              </router-link>
            </div>
          </template>
          <!--  -->

        </div>
      </div>
    </div>
    <div class="tipBox">
      <div class="nullBox" :class="{show:list.itemAll.total === 0 ||list.items.total === 0}">
        <span class="fontHt videoName">啊噢！没有找到相关的视频哦(＠_＠;)</span><br>
        <div class="butBox">
          <button type="button" class="buttonBox active marA">点我提交想要添加的视频</button>
        </div>
      </div>
    </div>
    <div class="pageBox" v-show="contentIndex && list.itemAll.navigateFirstPage !== 0">
      <div class="pageBoxOne">
        <button class="pageButton fontHt" type="button" @click="page(1)">&lt</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.navigateFirstPage)" :class="{active:list.itemAll.pageNum === list.itemAll.navigateFirstPage}"  v-show="list.itemAll.isFirstPage">{{list.itemAll.navigateFirstPage}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.pageNum-3)" :class="{active:list.itemAll.pageNum === lestPage}" v-show="list.itemAll.pageNum-3 >= list.itemAll.navigateFirstPage">{{list.itemAll.pageNum-3}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.pageNum-2)" :class="{active:list.itemAll.pageNum === lestPage}" v-show="list.itemAll.pageNum-2 >= list.itemAll.navigateFirstPage">{{list.itemAll.pageNum-2}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.pageNum-1)" :class="{active:list.itemAll.pageNum === lestPage}" v-show="list.itemAll.pageNum-1 >= list.itemAll.navigateFirstPage">{{list.itemAll.pageNum-1}}</button>
        <button class="pageButton fontHt" type="button" :class="{active:list.items.pageNum}" v-show="list.items.pageNum !== list.items.navigateFirstPage && list.items.pageNum !== list.items.navigateLastPage">{{list.items.pageNum}}</button>
        <button class="pageButton fontHt" type="button" :class="{none:list.itemAll.navigateLastPage <= 3}">...</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.pageNum+1)" :class="{active:list.itemAll.pageNum === lestPage}" v-show="list.itemAll.pageNum <= list.itemAll.navigateLastPage-1">{{list.itemAll.pageNum+1}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.pageNum+2)" :class="{active:list.itemAll.pageNum === lestPage}" v-show="list.itemAll.pageNum <= list.itemAll.navigateLastPage-2">{{list.itemAll.pageNum+2}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.pageNum+3)" :class="{active:list.itemAll.pageNum === lestPage}" v-show="list.itemAll.pageNum <= list.itemAll.navigateLastPage-3">{{list.itemAll.pageNum+3}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.navigateLastPage)" :class="{active:list.itemAll.pageNum === list.itemAll.navigateLastPage}" v-show="list.itemAll.isLastPage && list.itemAll.pageNum !== 1">{{list.itemAll.navigateLastPage}}</button>
        <button class="pageButton fontHt" type="button" @click="page(list.itemAll.navigateLastPage)">></button>
      </div>
    </div>
  </div>
  <boder :class="{fixed:list.itemAll.total === 0 ||list.itemAll.total <= 7 ||list.items.total <= 2 ||list.items.total === 0}"></boder>
<!--  <div class="zwBox" :class="{show:list.itemAll.total !== 0 }"></div>-->
  <x-f></x-f>
</template>

<script setup>
import {onBeforeUnmount, onMounted, reactive, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router'
import API from "@/api/AxiosConfig";
import XF from "@/components/XF";
import Boder from "@/components/Boder";
const list = reactive({
  years: [],
  items: [],
  itemAll: []
})
const videoType = [{id:1,type:'原创'},{id:2,type:'漫画改'},{id:3,type:'小说改'},{id:4,type:'游戏改'},{id:5,type:'布袋戏'},{id:6,type:'热血'},
  {id:7,type:'穿越'},{id:8,type:'奇幻'},{id:9,type:'战斗'},{id:10,type:'搞笑'},{id:11,type:'日常'},{id:12,type:'科幻'},{id:13,type:'萌系'},
  {id:14,type:'治愈'},{id:15,type:'校园'},{id:16,type:'少儿'},{id:17,type:'泡面'},{id:18,type:'恋爱'},{id:19,type:'少女'},{id:20,type:'魔法'},
  {id:21,type:'冒险'},{id:22,type:'历史'},{id:23,type:'架空'},{id:24,type:'机战'},{id:25,type:'励志'},{id:26,type:'音乐'},{id:27,type:'推理'},
  {id:28,type:'催泪'},{id:29,type:'美食'},{id:30,type:'偶像'},{id:31,type:'乙女'},{id:32,type:'职场'},{id:33,type:'神魔'},{id:34,type:'性转'}]
const newYear = []
let year = new Date().getFullYear()
const router =useRouter()
const route = useRoute()
// let userSs = route.query.content
const content = ref(null)
const contentIndex = ref(true)
const pageBoxIndex = ref(false)   //搜索的页面跳转
const sxIndex = ref(true)
const activeIndex = ref(null)
const activeIndex2 = ref(null)
const activeIndex3 = ref(null)
const activeIndex4 = ref(null)
const activeIndex5 = ref(null)
const newIndex = ref(null)
const videoIndex= ref(null)
const activeIndex3Text = ref(null)
const nowPage = ref(1)
const lestPage = ref('1')
let cTimer = null
const inputJD = ref(null)
onMounted(() => {
  for (let i = 0;i<=18;i++){
    newYear.push({
      year:year - i
    })
  }
  list.years = JSON.parse(JSON.stringify(newYear))
    if (route.query.content !== undefined && route.query.content !== null && route.query.content !== ''){
      content.value = route.query.content
      searchVideo()
    }else {
      videoSx()
      api4(1,21)
    }
  setTimeout(() => {
    reSize()
  },15)
  window.addEventListener('resize',reSize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize',reSize)
})
function reSize() {
  clearTimeout(cTimer)
  cTimer = setTimeout(() => {
    // if (vc){
      setTimeout(() => {
        const imgBox = document.getElementsByClassName("imgC")
        for (let i = 0; i < imgBox.length; i++) {
          imgBox[i].style = 'height:'+(imgBox[0].offsetWidth*1.35)+'px'
          // vc = false
        }
      },1)
    // }
  },10)
}
function videoSx() {
  if (route.query.screen !== '' && route.query.screen !== undefined && route.query.screen !== null){
    activeIndex4.value = route.query.screen-0
  }else if (route.query.screenLx !== '' && route.query.screenLx !== undefined && route.query.screenLx !== null){
    activeIndex5.value = route.query.screenLx-0
  }else if (route.query.screenTime !== '' && route.query.screenTime !== undefined && route.query.screenTime !== null){
    activeIndex3Text.value = route.query.screenTime
    activeIndex3.value = route.query.num-0
  }else if (route.query.screenAd !== '' && route.query.screenAd !== undefined && route.query.screenAd !== null){
    activeIndex2.value = route.query.screenAd-0
  }
  sxIndex.value = false
  // console.log(activeIndex4.value,activeIndex5.value,activeIndex3Text.value,activeIndex2.value)
}
function searchVideo(){
  contentIndex.value = false
  API({ url: '/api/videosearch/'+content.value+'/1/10', method: 'get' }).then(res => {
    list.items = res.data
  }).catch(err => {
    // console.log(err)
  })
  pageBoxIndex.value = true
}
function searchVideoOne(content){
  // console.log('err')
  API({ url: '/api/videosearch/'+content.value+'/0/10', method: 'get' }).then(res => {
    list.items = res.data
  }).catch(err => {
    // console.log(err)
  })
}
function clear(){
  content.value = ''
  contentIndex.value = true
  pageBoxIndex.value = false
  list.items = []
  api4(1,21)
}
function activeC(i) {
  if (i === 2){
    videoIndex.value = 1
  }else if (i === 1){
    videoIndex.value = 2
  }else if(i === null){
    videoIndex.value = null
  }
  activeIndex.value = i
  api4(list.itemAll.pageNum,21)
}
function activeC2(i,address) {
  activeIndex2.value = i
  api4(list.itemAll.pageNum,21)
}
function activeC3(i,year) {
  activeIndex3.value = i
  if (!i){
    activeIndex3Text.value = null
  }else {
    activeIndex3Text.value = year
  }
  api4(list.itemAll.pageNum,21)
}
function activeC4(i) {
  activeIndex4.value = i
  api4(list.itemAll.pageNum,21)
}
function activeC5(i) {
  activeIndex5.value = i

  api4(list.itemAll.pageNum,21)
}
function api4(pageNum,pageSize) {
  API.post('/api/videosearch/ssapi/'+pageNum+'/'+pageSize+'',{sx:activeIndex4.value,vTime:''+activeIndex3Text.value+'',vIndex:videoIndex.value,vAddress:''+activeIndex2.value+'',vType:activeIndex5.value,vType2:activeIndex5.value}).then(res => {
    list.itemAll = res.data
    setTimeout(() =>{
      reSize()
    },50)
  }).catch(err => {
  })
}
function yiru(index) {
  newIndex.value = index
}
function yichu(index) {
  newIndex.value = null
}
function page(i){
  lestPage.value = ''+i+''
  api4(i,21)
}
</script>

<style lang="less" scoped>
.pageBox{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  padding: 25px 25px 65px 25px;
}
.pageButton{
  background-color: rgba(238, 238, 238, 0.6);
  border-radius: 4px;
  border: none;
  color: black;
  padding: 10px 15px;
  margin: 0 5px;
}
.pageButton:hover{
  color: #00AEEC;
}
.zwBox{
  width: 100%;
  height: 165px;
  display: none;
}
.fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.butBox{
  display: flex;
  justify-content: center;
  margin-top: 15px;

}
.tipBox{
  display: flex;
  justify-content: center;
}
.nullBox{
  display: none;
  padding: 25px 35px;
}

.epicNum{
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 5;
  font-family: 黑体;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
}
.goBoxOne{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  //background-color: rgba(0, 0, 0, 0.1);
}
.go-box{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff9cac;
}
.goAction{
  transform: scale(1.2);
  transition: 0.3s;
}
a{
  text-decoration: none;
}
.sx-more{
  height: 220px;
  transition: 0.5s;
  overflow: hidden;
}
.icon-more{
  color: #61666D;
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
  transform: rotate(0deg);
  transition: 0.5s;
}
.spanSm{
  font-family: "黑体";
  font-weight: 550;
  font-size: 12px;
  color: gray;
  height: 17px;
  line-height: 17px;
}
.like{
  width: 100%;
  display: flex;
  padding-top: 45px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: #ffffff;
}
.bor-t-l-r{
  border-radius: 8px;
  overflow: hidden;
}
.z-10{
  z-index: 10;
}
.span-out-hid{
  width: 100%;
  font-size: 16px;
  color: #18191c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 5px 0 2px 0;
}
.player-all-box{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
}
.video-player-box{
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
  flex: 1;
}
.video-player-box>video{
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  content-visibility: visible;
  object-fit: cover;
}
.div-waike{
  //-webkit-box-flex: 0;
  //width: calc(83.33% - 3.33px);
  //flex: 0 0 calc(83.33% - 3.33px);
  width: 100%;
  overflow: hidden;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.p-r{
  position: relative;
}
.p-a{
  position: absolute;
}
.up-list-all{
  width: 100%;
  display: flex;
  //justify-content: center;
  margin-bottom: 25px;
}
.up-list{
  //width: 100%;
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
  flex: 1;
}

.up-list-one{
  width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}
.up-list-one>img{
  display: flex;
  border-radius: 8px;
  width: 100%;
  object-fit: cover;
  height: 100%;
  transition: 0.3s;
  //transform: scale(0);
}
.tv-show-box{
  margin: 25px 0;
  width: 85%;
  max-width: 1790px;
  z-index: 5;
}
.tv-waike{
  display: flex;
  justify-content: center;
}
.show-tv-one{
  display: flex;
  width: 60%;
  /* background-color: cornflowerblue; */
  border-radius: 8px;
  z-index: 5;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.xq-tv-one{
  display: flex;
  justify-content: flex-end;
  left: 5%;
  width: 95%;
  height: 100%;
  top: 25px;
  border-radius: 8px;
  background: rgb(243, 59, 46);
}
.xq-list-one{
  width: 38.5%;
  display: flex;
  flex-direction: column;
  padding: 15px 30px;
  justify-content: flex-end;
  z-index: 2;
}
.pf-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.pf-one{
  display: flex;
  align-items: center;
}
.dp-box{
  margin-left: 15px;
}
.video-de{
  width: 100%;
  height: 100%;
  object-fit: fill
}
.nr-body{
  padding: 10px 0 20px 0;
}
.tv-go{
  display: flex;
  flex-direction: row;
}
.tv-go-one{
  width: 50px;
  height: 50px;
  background-color: hsla(0,0%,100%,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin-right: 25px;
  border: none;
}
.next-slt-box{
  overflow-x: auto;
  display: flex;
  padding: 15px 0 35px 0;
}
.tv-slt-one{
  min-width: 145px;
  border-radius: 8px;
  border: 4px solid hsla(0,0%,100%,.2);
  margin: 5px;
}
.tv-slt-one>img{
  border-radius: 8px;
}
.back-img{
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .15;
  z-index: -1;
}
.background-cover{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  height: 73px;
  z-index: 2;
  background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.00386607) 8.07%,rgba(0,0,0,.0152486) 15.54%,
  rgba(0,0,0,.033824) 22.5%,rgba(0,0,0,.0592687) 29.04%,rgba(0,0,0,.0912593) 35.26%,rgba(0,0,0,.129472) 41.25%,
  rgba(0,0,0,.173583) 47.1%,rgba(0,0,0,.22327) 52.9%,rgba(0,0,0,.278208) 58.75%,rgba(0,0,0,.338074) 64.74%,
  rgba(0,0,0,.402545) 70.96%,rgba(0,0,0,.471296) 77.5%,rgba(0,0,0,.544005) 84.46%,rgba(0,0,0,.620347) 91.93%,rgba(0,0,0,.7));

}
.tip{
  bottom: 15px;
  left: 8px;
  z-index: 4;
}

.tip-span{
  font-size: 12px;
  font-weight: bold;
  font-family: 黑体;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: white;
  margin: 0 5px;
  -ms-user-select: none;
  user-select: none;
}
.go-player-box{
  display: flex;
  flex-direction: row;
  bottom: 15px;
  right: 10px;
  z-index: 6;
}
.link-one{
  margin-left: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #00000099;
}
.box-active{
  -webkit-transition: -webkit-box-flex .5s;
  transition: -webkit-box-flex .5s;
  -o-transition: flex .5s;
  transition: flex .5s;
  transition: flex .5s,-webkit-box-flex .5s,-ms-flex .5s;
}
.noneBox{
  display: block;
}
.up-list-def-w{
  transition: flex .3s,-webkit-box-flex .3s,-ms-flex .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 25px;
}
//----------------------------------筛选样式---------------------------------------
.clearSpan{
  position: absolute;
  flex: 0;
  right: 5px;
  top: 12px;
  display: none;
}
.inputBox{
  display: flex;
  flex: 1;
  position: relative;
}
.searchSvg{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  margin: 0 10px;
}
.search{
  flex: 1;
  height: 30px;
  padding: 5px 25px 5px 5px;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 16px;
}
.searchButton{
  border: none;
  background-color: #00AEEC;
  width: 100px;
  height: 40px;
  border-radius: 4px;
  color: white;
  margin: 0 10px;
}
.searchBok{
  padding: 35px 0 25px 0;
  display: flex;
  justify-content: center;
}
.searchBoxOne{
  width: 600px;
  height: 50px;
  background-color: #F6F7F8;
  border:1px solid #F1F2F3;
  border-radius: 4px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.searchBoxOne:hover,.searchBoxOneActive{
  background-color:#fff;
}
.flex-left{
  position: relative;
}
.tipType{
  padding: 5px 10px;
  background-color: #fc8db2;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  font-size: 14px;
}
.goButton{
  width: 100px;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  color: white;
  background-color: #fc8db2;
}
.sm-span{
  line-height: 16px;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.sm-span-x{
  line-height: 16px;
  font-size: 14px;
  color: #5f5f5f;
  margin-bottom: 8px;
}

//.divSS{
//  //width: 100%;
//  height: 1px;
//  background-color: #F1F2F3;
//}
.flex-right{
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}
.videoName{
  font-size: 18px;
  color:  #f25d8e;
  margin-bottom: 5px;
}
.flex-left>img{
  width: 180px;
  min-width: 150px;
  border-radius: 4px;
}
.buttonBox{
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: transparent;
  color: #61666D;
  outline: none;
  cursor: pointer;
}
.buttonBox:hover{
  color: #00AEEC;
}
.buttonBoxs{
  border: 1px solid #E3E5E7;
  border-radius: 4px;
  padding: 10px 10px 10px 15px;
  margin: 0 5px;
  background-color: #ffffff;
  color: #61666D;
  outline: none;
}

.SXOne{
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.SXOne-t{
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.SXOne-x{
  width: 100%;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.SXOne-x>button{
  margin: 5px 5px;
}
.zw{
  width: 100%;
  height: 60px;
}
.transparentNav{
  background: var(--bg1);
  box-shadow: 0 2px 4px #00000014;
  color: black;
}
.searchBody{
  width: 100%;
  margin:0 auto;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.rotateSvg{
  transform: rotate(-180deg);
  transition: 0.5s;
}
@media screen and (min-width: 2061px){
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.28%;
    flex: 0 0 14.28%;
    width: 14.28%;
  }
  .div-waike,.sx,.searchBack {
    width: 1784px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.27%;
    flex: 0 0 14.27%;
    width: 14.27%;
  }
  .div-waike{
    width: 100%;
    margin: 0 136px;
  }
  .sx,.searchBack{
  margin: 0 136px;
}
  //.sx{
  //  height: 245px;
  //}
}
@media screen and (min-width: 1559.8px) and (max-width: 1635.8px) {
  .sx-more{
    height: 275px;
  }
}
@media screen and (min-width: 1400px) and (max-width: 1559.8px) {
  .up-list-def-w {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.6%;
    flex: 0 0 16.6%;
    width: 16.6%;
  }
  .div-waike,.sx,.searchBack {
    margin: 0 60px 0 60px;
  }

}
@media screen and (min-width: 1399.8px) and (max-width: 1482px) {
  .sx-more{
    height: 275px;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1399.8px) {
  .div-waike,.sx,.searchBack {
    width: 1180px;
    margin: 0 auto;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 19.9%;
    flex: 0 0 19.9%;
    width: 19.9%;
  }
  .sx-more{
    height: 275px;
  }
}
@media screen and (min-width: 1140px) and (max-width: 1300.8px) {
  .div-waike,.sx,.searchBack {
    margin: 0 60px;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66%;
    flex: 0 0 16.66%;
    width: 16.66%;
  }
  .sx-more{
    height: 275px;
  }
}
@media screen and (min-width: 1139px) and (max-width: 1266.8px) {
  .sx-more{
    height: 315px;
  }
}
@media screen and (max-width: 1139.8px) {
  .div-waike,.sx,.searchBack {
    min-width: 1020px;
    width: 1020px;
    max-width: 1020px;
    margin: 0 auto;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 19.9%;
    flex: 0 0 19.9%;
    width: 19.9%;
  }
  .sx-more{
    height: 315px;
  }
}
.active{
  background-color: #DFF6FD;
  color: #00AEEC;
}
.show{
  display: block;
}
.none{
  display: none;
}
.searchBack{
  padding: 10px 0;
  display: flex;
  margin-bottom: 10px;
  margin-top: 20px;
}
.sxActive{
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}
.marA{
  margin: 0 auto;
}
</style>
